<template>
    <!-- 基金列表项 -->
    <div class="madp-financial-jijin-item">
        <div class="all_content">
            <div class="all_info" @click="goFundDetails(info)">
                <div class="info_left">
                    <div>{{ info.name }}</div>
                    <div>{{ IsTextRisk(info.riskLevel) }} | {{ AttrTxt(info.prdAttr) }} | {{ info.pFirstAmt }}元起购</div>
                </div>
                <div class="info_right" v-if="info.prdAttr == '4'">
                    <div class="right_num">
                        <div>{{ format_money_decimal_qiri_jingdu(info.fundIncomeUnit, true) }}</div>
                        <div>万份收益</div>
                    </div>
                    <div class="right_rate">
                        <div :class="info.yield && info.yield >= 0 ? 'rate_first1' : 'rate_first'">
                            <span>{{ format_money_decimal_qiri_jingdu(info.yield, true) }}</span
                            >%
                        </div>
                        <div>七日年化收益率</div>
                    </div>
                </div>
                <div class="info_right" v-else>
                    <div class="right_num">
                        <div>{{ format_money_decimal_jingzhi(info.nav, true) }}</div>
                        <div>单位净值</div>
                    </div>
                    <div class="right_rate">
                        <div :class="info.yearRate && info.yearRate >= 0 ? 'rate_first1' : 'rate_first'">
                            <span>{{ format_money_decimal_jingdu(info.yearRate, true) }}</span
                            >%
                        </div>
                        <div>近一年涨跌幅</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { IsTextRisk, AttrTxt, format_money_decimal_jingdu, format_money_decimal_jingzhi, format_money_decimal_qiri_jingdu } from '@/utils/financial-utils';
    export default {
        name: 'FinancialJijinItem',
        components: {},
        data() {
            return {};
        },
        props: {
            info: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        },
        created() {},
        mounted() {},
        methods: {
            IsTextRisk,
            AttrTxt,
            format_money_decimal_jingdu,
            format_money_decimal_jingzhi,
            format_money_decimal_qiri_jingdu,
            goFundDetails(info) {
                this.$router.push({
                    path: '/financialShop/financial-fund-detail',
                    query: {
                        id: info.id
                    }
                });
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-financial-jijin-item {
        .all_content {
            padding: 0 10px;
            color: #2c2c2c;
            background: #fff;
            .all_info {
                padding: 18px 0;
                display: flex;
                justify-content: space-between;
                height: 80px;
                line-height: 24px;
                border-bottom: 1px solid #f5f5f5;
                .info_left {
                    font-size: 15px;
                    div:first-child {
                        width: 175px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    div:last-child {
                        font-size: 12px;
                        opacity: 0.5;
                    }
                }
                .info_right {
                    display: flex;
                    justify-content: space-between;
                    text-align: right;
                    .right_num {
                        div:first-child {
                            font-size: 18px;
                            font-weight: bold;
                        }
                        div:last-child {
                            font-size: 12px;
                            opacity: 0.5;
                        }
                    }
                    .right_rate {
                        margin-left: 12px;
                        .rate_first {
                            font-size: 14px;
                            color: #5ba764;
                            span {
                                font-size: 18px;
                                font-weight: bold;
                            }
                        }
                        .rate_first1 {
                            font-size: 14px;
                            color: #ed5555;
                            span {
                                font-size: 18px;
                                font-weight: bold;
                            }
                        }
                        div:last-child {
                            font-size: 12px;
                            opacity: 0.5;
                        }
                    }
                }
            }
            .up_img {
                margin-bottom: 77px;
                text-align: center;
                padding: 24px 0;
                color: #2c2c2c;
                img {
                    width: 130px;
                    height: 23px;
                }
                div {
                    opacity: 0.2;
                    font-size: 11px;
                }
            }
        }
    }
</style>
